<template>
  <div class="bigbox">
    <!-- 报修信息 -->
    <div class="head">
      <div class="title">
        <div class="t1">84</div>
        <div class="t2">报修信息</div>
      </div>
      <div class="content">
        <van-cell-group>
          <van-field v-model="value"
                     label="报修单号："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="报修设备："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="紧急程度："
                     placeholder="xxxxx" />

          <van-field v-model="value"
                     label="故障类型："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="报修员工："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="报修时间："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="故障现象："
                     placeholder="xxxxx" />

        </van-cell-group>
      </div>
    </div>
    <!-- 维修进度 -->
    <div class="moddile">
      <div class="title">
        <div class="t1">84</div>
        <div class="t2">维修进度</div>
      </div>
      <div>
        <van-progress :percentage="50" />
      </div>
    </div>
    <!-- 维修信息 -->
    <div class="foot">
      <div class="title">
        <div class="t1">84</div>
        <div class="t2">报修信息</div>
      </div>
      <div class="content">
        <van-cell-group>
          <van-field v-model="value"
                     label="开始时间："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="结束时间："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="中断时间："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="维修时长："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="维修人："
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="手机号："
                     placeholder="xxxxx" />
          <div style="color:#646566;font-size:13px;margin-left:15px;">
            <span>开始维修照片:</span>
            <van-image width="100"
                       height="100"
                       src="https://img01.yzcdn.cn/vant/cat.jpeg"
                       style="margin:5px 0 0 20px" />
          </div>
          <div style="color:#646566;font-size:13px;margin-left:15px;">

            <span>结束维修照片:</span>
            <van-image width="100"
                       height="100"
                       src="https://img01.yzcdn.cn/vant/cat.jpeg"
                       style="margin:5px 0 0 20px" />
          </div>

          <!-- <van-field v-model="value"
                     label="开始维修照片"
                     placeholder="xxxxx" />
          <van-field v-model="value"
                     label="结束维修照片"
                     placeholder="xxxxx" /> -->
          <van-field v-model="value"
                     label="维修反馈："
                     placeholder="xxxxx" />

        </van-cell-group>
      </div>
      <!-- 按钮 -->
      <div class="Button">
        <button class="btn"><span>暂停</span> </button>
        <button class="btn"><span>完成</span> </button>
        <button class="btn"
                @click="complete"><span>提交</span> </button>
      </div>
    </div>

  </div>
</template>
<script>
import Vue from 'vue'
import { Field } from 'vant'
Vue.use(Field)

import { Progress } from 'vant'
Vue.use(Progress)

import { Image as VanImage } from 'vant'
Vue.use(VanImage)

export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    complete() {
      this.$router.push('/photograph')
    }
  }
}
</script>
<style lang="less">
@import './information.less';
</style>
